<template>
	<view v-if="!loading" class="body">
		<view class="head-box">
			<view class="avatar-box">
				<image class="avatar-img" :src="null == userInfo ? '/image/my/logo.png' : userInfo.avatarUrl"></image>
			</view>
			<text class="nick-name">{{ null == userInfo ? '微信昵称' : userInfo.nickName }}</text>
			<!-- <image class="login-img" :src="staticBaseUrl + '/mintai-icon.png'"> -->
		</view>
		<view class="auth-btns-box">
			<button class="active-btn" @tap="getUserProfile">手机号快捷登录</button>
			<button class="active-default" @tap.stop.prevent="phoneLogin">其他手机号码登录</button>
		</view>
		<u-popup :show="showPhone" @close="onClose" mode="center" custom-style="width:90%;border-radius:24rpx">
			<view class="phone-view">
				<view class="dialog-iptbox">
					<view class="dialog-img">
					  <image :src="staticBaseUrl + '/static/image/my/head.png'" mode="widthFix"></image>
					</view>
					<input type="number" class="ipt-username" :value="phone" style="flex: 1"
					 placeholder="手机号码" @input="bindPhoneChange" />
					<view class="authCode" :style="'color:' + (codeDisabled ? '#FAB7B4' : '#F35C56')"
					@tap.stop.prevent="getMsgCode">{{messageText}}</view>
				</view>
				<view class="dialog-iptbox">
					<view class="dialog-img">
					  <image :src="staticBaseUrl + '/static/image/my/head.png'" mode="widthFix"></image>
					</view>
					<input type="number" class="ipt-username" :value="authCode" placeholder="验证码" @input="bindAuthCodeChange" />
				</view>
				<view class="dialog-btnbox">
					<view class="btn-cancel" @tap.stop.prevent="onClose">取消</view>
					<view class="btn-confirm" @tap.stop.prevent="toLogin" 
					:style="'color:' + (authDisabled ? '#FAB7B4;opacity: 0.6' : '#fff;opacity: 1')">确定</view>
				</view>
			</view>
		</u-popup>
		<privacy-pop  @agreePrivacy="init"></privacy-pop>
	</view>
</template>

<script>
	const app = getApp();

	const utils = require('../../utils/util');
	import { http } from '@/utils/commonRequest.js'
	import {
		staticBaseUrl
	} from '@/utils/constant.js'

	export default {
		data() {
			return {
				staticBaseUrl,
				baseUrl: app.globalData.baseurl,
				loading: false,
				userInfo: null,
				inviterId: null,
				inviteActId: null,
				showPhone: false,
				phone: '',
				messageText: '获取验证码',
				codeDisabled: false,
				authDisabled: true,
				authCode: ''
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			var that = this;
			if (options.inviterId && options.inviteActId) {
				that.inviterId = options.inviterId
				that.inviteActId = options.inviteActId
			}
		},

		onShow() {
			if (uni.getPrivacySetting) {
				uni.getPrivacySetting({
					success: res => {
						if (res.needAuthorization) {
							this.showPrivacy = true
							uni.hideTabBar()
						} else {
							this.init()
						}
					},
					fail: () => {},
					complete: () => {},
				})
			} else {
				console.log("不支持getPrivacySetting")
				this.init()
			}
		},

		methods: {
			init: function(){
				console.log('-agree-')
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo: function(e) {
				console.log(e);

				if (null == e.detail.userInfo) {
					return;
				}

				app.globalData.userInfo = e.detail.userInfo;
				this.userInfo = e.detail.userInfo
				uni.redirectTo({
					url: '/pages/regist/phoneVerify'
				});
			},

			getUserProfile: function(e) {
				var that = this;
				uni.redirectTo({
					url: '/pages/regist/phoneVerify?inviterId=' + that.inviterId +
						'&inviteActId=' + that.inviteActId
				});
			},
			
			toLogin: function(){
				let that = this;
				http.get('/mtPointMall/mtCodeCheck', {
					params: {
						phone: this.phone,
						code: this.authCode
					}
				})
				.then((res) => {
					res = res.data
					if ('200' == res.code) {
						// 通过验证，跳转到注册页面
						uni.redirectTo({
							url: '/pages/regist/phoneVerify?inviterId=' + that.inviterId +
								'&inviteActId=' + that.inviteActId+ '&phone=' + that.phone+ '&code=' + that.authCode
						});
					}else{
						utils.tips(res.msg);
					}
				}).catch((err) => {
					console.log(err);
				})
				
			},

			
			goBack: function(e) {
				uni.navigateBack({
					delta: 1,
					fail: (err) => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				});
			},
			
			// 其他手机号码登录
			phoneLogin: function(){
				this.showPhone = true;
			},
			
			onClose: function() {
				this.showPhone = false;
			},
			
			bindPhoneChange: function(e){
				this.phone = e.detail.value;
				this.authDisabled = !(this.phone && this.authCode)
			},
			
			bindAuthCodeChange:function(e) {
				this.authCode = e.detail.value;
				this.authDisabled = !(this.phone && this.authCode)
			},
			
			// 获取短信验证码
			getMsgCode: function(){
				if(this.codeDisabled){
					return;
				}
				
				let that = this;
				let phone = that.phone;
				if (utils.isEmpty(phone) || !utils.verifyPhone(phone)) {
					utils.tips('请输入正确的手机号！');
					return;
				}
				
				this.codeDisabled = true;
				
				let params = { phone: phone }
				uni.showLoading({
					title: '发送中'
				});
				http.get('/mtBankInfo/sendCodeMt', {params: params})
					.then((res) => {
						res = res.data;
						uni.hideLoading();
						if ('200' == res.code) {
							utils.message('验证码已发送');
							let second = 60;
							let a = setInterval(function() {
								second--;
								if (second == 0) {
									that.messageText = '获取验证码'
									that.codeDisabled = false
									clearInterval(a);
								} else {
									that.messageText = second + 'S后获取'
								}
							}, 1000);
						}else {
							utils.message(res.msg);
							that.codeDisabled = false
						}
					}).catch((err) => {
						uni.hideLoading();
						that.codeDisabled = false
						utils.message('获取验证码失败')
						console.log('验证码err',err)
				})
			},
		}
	};
</script>
<style>
	.body {
		min-height: 100%;
		background-color: white;
	}
	
	.login-img {
		width: 448rpx;
		height: 451rpx;
	}

	.head-box {
		padding-top: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar-box {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #f6f6f6;
	}

	.nick-name {
		font-size: 36rpx;
		margin-top: 20rpx;
	}

	.auth-btns-box {
		margin-top: 390rpx;
	}

	.active-btn {
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 36rpx;
		background-color: #FF4A4A;
		color: #fff;
		margin: 0 60rpx;
	}

	.active-default {
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 36rpx;
		border: 1px solid #FF4A4A;
		background-color: #fefefe;
		color: #FF4A4A;
		margin: 0 60rpx;
		margin-top: 50rpx;
	}
	
	.phone-view{
		padding: 50rpx 34rpx;
		box-sizing: border-box;
	}
	
	.ipt-username{
	  width: 80%;
		padding-top: 6rpx;
	}
	
	.authCode{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		word-break: keep-all;
		padding-right: 10rpx;
	}
	
	.dialog-iptbox {
	  display: flex;
	  position: relative;
	  padding-left: 16rpx;
	  font-size: 28rpx;
	  height: 96rpx;
	  background-color: #eee;
	  border-radius: 24rpx;
	  align-items: center;
	  margin-bottom: 16rpx;
	}
	
	.dialog-img {
	  width: 48rpx;
	  height: 48rpx;
	  margin-right: 24rpx;
	}
	
	.dialog-btnbox {
	  padding: 40rpx 0rpx;
	  display: flex;
	  justify-content: space-between;
	}
	
	.btn-cancel,
	.btn-confirm {
	  width: 260rpx;
	  height: 84rpx;
	  background-color: #fff;
	  color: #666;
	  font-size: 34rpx;
	  line-height: 84rpx;
	  border: 1rpx solid #eaeaea;
	  border-radius: 42rpx;
	  text-align: center;
	}
	
	.btn-confirm {
	  background: linear-gradient(140deg, #ffc996 0%, #ed176e 100%);
	  color: white;
	}
</style>
